<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
    <link rel="stylesheet" href="./CSS/login.css">
</head>

<body>
    <div class="wrapper">
        <!-- 表示这个元素同时属于 form-wrapper 和 sign-in 这两个类。 -->
        <div class="form-wrapper sign-in">
            <form action="#" method="post">
                <h2>登 录</h2>
                <div class="input-group">
                    <!-- <input type="text" placeholder="用户名" id="username"> -->
                    <!-- required：这个属性是一个布尔属性，表示该输入框是必填项 -->
                     <input type="text" required>
                     <label for="">用户名</label>
                </div>
                
                <div class="input-group">
                     <input type="password" required>
                     <label for="">密码</label>
                </div>
                <div class="remember">
                    <label for=""><input type="radio">记住密码</label>
                </div>
                <button type="submit">登 录</button>
                <div class="signUp-link">
                    <p>还没有账号？<a href="#" class="signUpBtn-link">注册</a>
                        <a href="#" class="forgotPasswordBtn-link">忘记密码</a></p>
                </div>
                <div class="social-platform">
                    <p>社交账号登录</p>
                    <div class="social-icons">
                        <!-- 引入了font-awesome，所以这里的i表示图标 -->
                        <a href="https://im.qq.com"><i class="fa-brands fa-qq"></i></a>
                        <a href="https://weixin.com"><i class="fa-brands fa-weixin"></i></a>
                        <a href="https://www.douyin.com"><i class="fa-brands fa-tiktok"></i></a>
                    </div>
                </div>
            </form>
        </div>
        <div class="form-wrapper sign-up">
            <form action="#" method="post">
                <h2>注 册</h2>
                <div class="input-group">
                    <!-- <input type="text" placeholder="用户名" id="username"> -->
                    <!-- required：这个属性是一个布尔属性，表示该输入框是必填项 -->
                     <input type="text" required>
                     <label for="">用户名</label>
                </div>
                <div class="input-group">
                     <input type="password" required>
                     <label for="">密码</label>
                </div>
                <div class="input-group">
                    <input type="email" required>
                    <label for="">邮箱</label>
                </div>
                <div class="remember">
                    <label for=""><input type="radio">我同意协议</label>
                </div>
                <button type="submit">注 册</button>
                <div class="signUp-link">
                    <p>已经有账号了<a href="#" class="signInBtn-link">登录</a></p>
                </div>    
            </form>
        </div>
        <div class="form-wrapper forgot-password">
            <form action="#" method="post">
                <h2>忘记密码</h2>
                <div class="input-group">
                    <!-- <input type="text" placeholder="用户名" id="username"> -->
                    <!-- required：这个属性是一个布尔属性，表示该输入框是必填项 -->
                     <input type="text" required>
                     <label for="">用户名</label>
                </div>
                <div class="input-group">
                     <input type="password" required>
                     <label for="">新密码</label>
                </div>
                <div class="input-group">
                    <input type="password" required>
                    <label for="">重复密码</label>
                </div>
                <!-- <div class="remember">
                    <label for=""><input type="radio">我同意协议</label>
                </div> -->
                <button type="submit">确 定</button>
                <div class="signUp-link">
                    <p><a href="#" class="forgotPasswordReturn-link">返回登录</a></p>
                </div>    
            </form>
        </div>
    </div>
    <script src="./JS/login.js"></script>
</body>
</html>